<template>
    <div v-draggable draggable="true"
        class="hover:bg-[rgba(0,0,0,.3)] cursor-move group/item bg-transparent text-white flex flex-col items-center justify-evenly w-1/2 h-24 rounded-sm absolute top-20 left-96 z-[999]">
        <!-- 歌词内容 -->
        <p :style="`color: ${color};`" class="cursor-default text-xl select-none">{{
            lyricValue }}</p>
        <!-- 设置面板 -->
        <div class="flex justify-between items-center w-96 invisible group-hover/item:visible">
            <input type="color" v-model="color">
            <!-- logo -->
            <i @click="bus.emit('openDesktopLyric')" class="iconfont icon-qiepian before:text-xl cursor-pointer"></i>
            <!-- 播放模式 -->
            <i class="iconfont icon-suijisenlin cursor-pointer before:text-2xl"></i>
            <!-- 上一首 -->
            <i @click="bus.emit('previousSong')"
                class="iconfont icon-diyiyeshouyeshangyishou cursor-pointer before:text-3xl"></i>
            <!-- 暂停 -->
            <i @click="bus.emit('changeValue', 2)" v-if="playStatus"
                class="iconfont icon-zanting cursor-pointer before:text-2xl"></i>
            <!-- 播放 -->
            <i @click="bus.emit('changeValue', 1)" v-else
                class="iconfont icon-bofang cursor-pointer before:text-2xl"></i>
            <!-- 下一首 -->
            <i @click="bus.emit('nextSong')"
                class="iconfont icon-zuihouyiyemoyexiayishou cursor-pointer before:text-3xl"></i>
            <!-- 设置 -->
            <i class="iconfont icon-shezhi before:text-xl cursor-pointer"></i>
            <!-- 关闭 -->
            <i @click="bus.emit('closeDesktopLyric')" class="iconfont icon-guanbi before:text-xl cursor-pointer"></i>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from "vue"
import { getCurrentInstance } from 'vue'
const ctx = getCurrentInstance()
const bus = ctx?.appContext.config.globalProperties.$bus
const lyricValue = ref("听好音乐，上梦音阁！")
const playStatus = ref(false)
const color = ref("#07c160")
onMounted(() => {
    bus.on('desktopLyrics', (value: string) => {
        lyricValue.value = value
    })
    bus.on('audioStatus', (value: boolean) => {
        playStatus.value = value
    })
})
</script>
<style scoped lang='less'></style>